<template>
	<view class="seckill-block">
		<view class="bg-option">
			<image :src="bg" class="bg-class"></image>
			<view class="bg-txt">每日七点开抢</view>
		</view>
		<view class="content">
			<view class="tab-block">
				<view class="item" @tap="tabChange(0)">
					<view class="title" :class="indexCurrent==0?'item-check-color':''">正在抢购</view>
					<view class="status-block center" style="opacity: 0;">
					</view>
				</view>

				<view class="item" @tap="tabChange(1)">
					<view class="title" :class="indexCurrent==1?'item-check-color':''">即将开始</view>
					<view class="time-block">
					</view>
				</view>

				<view class="item" @tap="tabChange(2)">
					<view class="title" :class="indexCurrent==2?'item-check-color':''">已结束</view>
					<view class="status-block center" style="opacity: 0;">
						进行中
					</view>
				</view>
				
			</view>
			<view class="items-block">
				<template v-if="seckillLst.length>0">
					<block v-for="(item,index) in seckillLst" :key="index">
						<block v-for="(good,indexTwo) in item.seckillCommodityList" :key="indexTwo">
							<seckillItem @itemClick='itemClick(good,item)' :goods='good' :itemType='indexCurrent'
								:beginTime='item.begin_time' :endTime='item.end_time' @countEndTwo='countEndTwo'
								@countEnd='countEnd'></seckillItem>
						</block>
					</block>
				</template>
				<view class="no-emty" v-if="seckillLst.length==0">暂无数据</view>
			</view>
			<view class="more-block" @tap="moreClick">
				查看更多>>
			</view>
		</view>
	</view>
</template>

<script>
	import seckillItem from '@/pages/tabbar/index/components/seckillItem.vue'
	export default {
		components: {
			seckillItem
		},
		props: {
			seckillLst: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				bg: require('@/static/index/option/miaosha.png'),
				indexCurrent: 0,
			}
		},
		methods: {
			tabChange(e) {
				this.indexCurrent = e
				this.$emit('tabChange', this.indexCurrent)
			},
			itemClick(goods, item) {
				uni.setStorageSync('seckillPrice', goods.seckill_price)
				if (this.indexCurrent == 0) {
					this.goShopDetail(goods, item)
				} else if (this.indexCurrent == 1) {
					this.$tools.showMsg('商品即将开始')
				} else {
					this.$tools.showMsg('限时秒杀已结束')
				}
			},
			goShopDetail(goods, item) {
				console.log(goods,item)
				uni.setStorageSync('seckillId', goods.id)
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + goods.commodity_id + '&endTime=' + item.end_time+ '&seckill_id=' + goods.id
				})
			},
			moreClick() {
				this.$emit('moreClick')
			},
			countEndTwo() {
				this.$emit('getList', this.indexCurrent)
			},
			countEnd() {
				this.$emit('getList', this.indexCurrent)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.seckill-block {
		margin-top: 56rpx;
		border-radius: 16rpx;
	}

	.bg-option {
		position: relative;
		z-index: 1;
		width: 100%;

		.bg-class {
			position: absolute;
			left: 0;
			right: 0;
			height: 188rpx;
			width: 100%;
			border-radius: 16rpx;
			z-index: 3;
		}

		.bg-txt {
			position: absolute;
			left: 22rpx;
			right: 0;
			top: 90rpx;
			z-index: 20;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}
	}

	.content {
		position: relative;
		z-index: 22;
		background: #fff;
		border-radius: 16rpx;
		left: 0;
		right: 0;
		top: 139rpx;
		padding: 32rpx 0 40rpx 0;
	}

	.tab-block {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.item-check-color {
			color: rgba(203, 60, 40, 1);
		}

		.status-block {
			margin-top: 18rpx;
			width: 94rpx;
			height: 36rpx;
			height: 36rpx;
			border-radius: 382rpx;
			background: rgba(203, 60, 40, 1);
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			justify-content: center;
		}

		.time-block {
			margin-top: 18rpx;
			width: 94rpx;
			height: 36rpx;
		}
	}

	.items-block {
		display: flex;
		flex-wrap: wrap;
		// margin-top: 40rpx;
	}

	.more-block {
		margin: 0 22rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 82rpx;
		background: rgba(246, 215, 181, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(156, 84, 8, 1);
	}

	.no-emty {
		margin-bottom: 20rpx;
		text-align: center;
		width: 100%;
		font-size: 28rpx;
	}
</style>
